﻿@page "/modals"

<h3>Modal 模态框</h3>

<h4>在保留当前页面状态的情况下，告知用户并承载相关操作</h4>

<Block Title="基本用法" Introduction="弹出一个对话框，适合需要定制性更大的场景" CodeFile="modal.1.html">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">弹窗标题</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p>弹窗正文</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary">保存</button>
                    </div>
                </div>
            </div>
            <div class="form-group col-12">
                <Button @onclick="@(e => Modal.Toggle())">弹窗</Button>
                <Modal @ref="Modal">
                    <ModalDialog Title="默认弹窗">
                        <BodyTemplate>
                            <div>我是弹窗内正文</div>
                        </BodyTemplate>
                    </ModalDialog>
                </Modal>
            </div>
        </div>
    </div>
</Block>

<Block Title="IsBackdrop 背景关闭模式" Introduction="点击弹窗以外区域默认关闭弹窗效果" CodeFile="modal.2.html">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <Button @onclick="@(e => BackdropModal.Toggle())">弹窗</Button>
                <Modal @ref="BackdropModal" IsBackdrop="true">
                    <ModalDialog Title="点击背景可关闭弹窗">
                        <BodyTemplate>
                            <div>我是弹窗内正文</div>
                        </BodyTemplate>
                    </ModalDialog>
                </Modal>
            </div>
        </div>
    </div>
</Block>

<Block Title="弹框大小" Introduction="通过 <code>Size</code> 设置弹框组件的大小" CodeFile="modal.3.html">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-4 col-lg-auto">
                <Button @onclick="@(e => SmailModal.Toggle())">小弹窗</Button>
                <Modal @ref="SmailModal">
                    <ModalDialog Size="Size.Small" Title="小弹窗">
                        <BodyTemplate>
                            <div>我是弹窗内正文</div>
                        </BodyTemplate>
                    </ModalDialog>
                </Modal>
            </div>
            <div class="form-group col-12 col-sm-4 col-lg-auto">
                <Button @onclick="@(e => LargeModal.Toggle())">大弹窗</Button>
                <Modal @ref="LargeModal">
                    <ModalDialog Size="Size.Large" Title="大弹窗">
                        <BodyTemplate>
                            <div>我是弹窗内正文</div>
                        </BodyTemplate>
                    </ModalDialog>
                </Modal>
            </div>
            <div class="form-group col-12 col-sm-4 col-lg-auto">
                <Button @onclick="@(e => ExtraLargeModal.Toggle())">超大弹窗</Button>
                <Modal @ref="ExtraLargeModal">
                    <ModalDialog Size="Size.ExtraLarge" Title="超大弹窗">
                        <BodyTemplate>
                            <div>我是弹窗内正文</div>
                        </BodyTemplate>
                    </ModalDialog>
                </Modal>
            </div>
        </div>
    </div>
</Block>

<Block Title="垂直居中" Introduction="通过 <code>IsCentered</code> 设置弹框组件的垂直居中" CodeFile="modal.4.html">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-4 col-lg-auto">
                <Button @onclick="@(e => CenterModal.Toggle())">垂直居中的弹窗</Button>
                <Modal @ref="CenterModal">
                    <ModalDialog IsCentered="true" Title="垂直居中的弹窗">
                        <BodyTemplate>
                            <div>我是弹窗内正文</div>
                        </BodyTemplate>
                    </ModalDialog>
                </Modal>
            </div>
        </div>
    </div>
</Block>

<Block Title="超长内容" Introduction="通过 <code>IsScrolling</code> 针对超出内容设置弹框组件滚轮滑动功能" CodeFile="modal.5.html">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-4 col-lg-auto">
                <Button @onclick="@(e => LongContentModal.Toggle())">内容超长的弹窗</Button>
                <Modal @ref="LongContentModal">
                    <ModalDialog IsCentered="true" Title="内容超长的弹窗">
                        <BodyTemplate>
                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        </BodyTemplate>
                    </ModalDialog>
                </Modal>
            </div>
            <div class="form-group col-12 col-sm-4 col-lg-auto">
                <Button @onclick="@(e => ScrollModal.Toggle())">内置滚动条弹窗</Button>
                <Modal @ref="ScrollModal">
                    <ModalDialog IsCentered="true" IsScrolling="true" Title="内置滚动条弹窗">
                        <BodyTemplate>
                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        </BodyTemplate>
                    </ModalDialog>
                </Modal>
            </div>
        </div>
    </div>
</Block>

<Block Title="多级弹窗" Introduction="点击弹窗内部按钮继续弹出模态窗" CodeFile="modal.6.html">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <button class="btn btn-primary" @onclick="@(e => CascadeModal.Toggle())">弹窗</button>
                <Modal @ref="CascadeModal">
                    <ModalDialog @ref="Dialog1" Title="内部按钮继续弹窗">
                        <BodyTemplate>
                            <div>我是第一个弹窗，点击下面按钮继续弹出第二个弹窗</div>
                        </BodyTemplate>
                        <FooterTemplate>
                            <Button @onclick="e => Dialog2?.Show()">继续弹第二个弹窗</Button>
                        </FooterTemplate>
                    </ModalDialog>
                    <ModalDialog @ref="Dialog2" Title="第二个弹窗">
                        <BodyTemplate>
                            <div>我是第二个弹窗，点击下面按钮继续弹出第三个弹窗</div>
                        </BodyTemplate>
                        <FooterTemplate>
                            <Button @onclick="e => Dialog1?.Show()">返回第一个弹窗</Button>
                            <Button Color="Color.Success" @onclick="e => Dialog3?.Show()">继续弹第三个弹窗</Button>
                        </FooterTemplate>
                    </ModalDialog>
                    <ModalDialog @ref="Dialog3" Title="第三个弹窗">
                        <BodyTemplate>
                            <div>我是弹窗内正文，点击下面关闭按钮关闭弹窗</div>
                            <p>弹窗背景一直是透明的哦，不会变黑乎乎的哦</p>
                        </BodyTemplate>
                        <FooterTemplate>
                            <Button Color="Color.Info" @onclick="e => Dialog2?.Show()">返回第二个弹窗</Button>
                        </FooterTemplate>
                    </ModalDialog>
                </Modal>
            </div>
        </div>
    </div>
</Block>

<Block Title="可拖拽弹窗" Introduction="点击弹窗标题栏对弹窗进行拖拽" CodeFile="modal.7.html">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <Button @onclick="@(e => Modal.Toggle())">弹窗</Button>
                <Modal @ref="Modal">
                    <ModalDialog Title="默认弹窗" IsDraggable="true">
                        <BodyTemplate>
                            <div>我是弹窗内正文</div>
                        </BodyTemplate>
                    </ModalDialog>
                </Modal>
            </div>
        </div>
    </div>
</Block>

<AttributeTable Items="@GetAttributes()" />
